<template>
  <div class="dashboard-card" :style="`--card-color: ${color}`">
    <div class="card-icon">
      <i class="fas" :class="icon"></i>
    </div>
    <div class="card-content">
      <h3>{{ title }}</h3>
      <p class="count-number">{{ formattedValue }}</p>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  title: String,
  value: [Number, String],
  icon: String,
  color: String
})

const formattedValue = computed(() => {
  return Number(props.value).toLocaleString()
})
</script>

<style scoped>
.dashboard-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s;

  &:hover {
    transform: translateY(-3px);
  }
}

.card-icon {
  position: absolute;
  right: -20px;
  bottom: -20px;
  opacity: 0.1;

  i {
    font-size: 6rem;
    color: var(--card-color);
  }
}

.card-content {
  position: relative;
  z-index: 1;

  h3 {
    color: #64748b;
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
}

.count-number {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--card-color);
  margin: 0;
}
</style>